<template>
  <div>
    <!-- 匿名插槽 -->
    <slot-no-name>
      <h1>不负韶华且行知</h1>
      <h2>愿有前程可奔赴</h2>
    </slot-no-name>
    <!-- 命名插槽 -->
    <slot-name>
      <template slot="hh">
        <h1>hh</h1>
      </template>
      <template slot="tt">
        <h2>tt</h2>
      </template>
    </slot-name>
    <!-- 作用域插槽 -->
    <slot-scope v-slot="{ scope }">
      {{ scope }}
      <p v-for="(item, index) in scope" :key="index">{{ item }}</p>
    </slot-scope>
  </div>
</template>

<script>
import slotNoName from './slotNoName.vue';
import slotName from './slotName.vue'
import slotScope from './slotScope.vue';
export default {
  components: {
    slotNoName,
    slotName,
    slotScope
  }
}
</script>

<style lang="scss" scoped></style>